<template>
<div class="wrap">
<xcl-header :show="loading.show" :call-back="()=>{}" :page-title="pageTitle" :header-right="headerRight"></xcl-header>
<div class="content">
	<div class="list-block">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">您的姓名</div>
	            <div class="item-input">
	              <input type="text" v-model="user.userName" placeholder="">
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">您的电话</div>
	            <div class="item-input">
	              <input type="text" maxlength="11" v-model="user.telphone" placeholder="">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>
	<div class="content-block" style="padding-bottom:0.5rem">
		<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="leaveMessageForProduct()">确定</button>
	</div>
	<div class="content-block" style="border-top:1px solid #ccc">
		<div class="text-center tips-text-style">您还可以免费拨打客服电话过去更多信息</div>
		<a href="tel:0571-88961297" class="button button-fill btn-style">直接联系客服</a>
	</div>
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>
  </div>
</template>
<script>
	import {getCheck,ERROR_DEFINE}  from '../libs/utils'
	import xclHeader from '../components/header.vue'
	import xclToast from '../components/xclToast.vue'
	let consultProxy = require('../proxy/consult_proxy');
	let consult = new consultProxy();
	export default {
		data(){
			return{
				scroll:true,
                pageTitle:'预约咨询',
                forbidenLogin:true,
                productId:this.$route.params.id,
                user:{
                	userName:'',
                	telphone:''
                },                
                loading:{
                    show:true,
                    showTxt:'数据加载中...'
                }, 
                toast:{
                	show:false,
                	content:''
                }
                
			}
		},		
		watch:{
			'user':{
				handler:function (val,oldVal) {
					if(!getCheck.checkPhone(val.telphone) || !val.userName){
						this.forbidenLogin = true;
					}else{
						this.forbidenLogin = false;
					}
				},
				deep:true
			}
		},
		methods:{
			leaveMessageForProduct(){
				var _this=this;
				consult.submitLeaveMessageForProduct('', this.user.userName, this.productId, this.user.telphone, '', '', '', 2, '', function (data){
					if(data.code==200){
						_this.toast = {show:true,content:'预约成功，请保持手机畅通...'};
						setTimeout(()=>{
                        	_this.toast.show = false;
                        },2800);
					}else{
						_this.toast = {show:true,content:ERROR_DEFINE[data.code]};
						setTimeout(()=>{
                        	_this.toast.show = false;
                        },2800);
					}
				});
			}
		},
		components:{
           "xclHeader":xclHeader,
           "xclToast":xclToast
        }
	}
</script>
<style lang="stylus">
.btn-style
	height 2rem
	font-size .85rem
	line-height 2rem !important
	width 100%
.text-right
	text-align right
.tips-text-style
	padding 0.5rem 0
	font-size .75rem	
</style>